<template>
	<view class="main">
		<!-- <u-navbar title="" @rightClick="rightClick" :autoBack="true"></u-navbar> -->
		<!-- <view class="top-nav" @click="dayBottom = '100px'"> -->
		<view class="top-nav" @click="naviToCalendar">
			<view class="nav-date">
				<view class="nav-day">{{day}}</view>
				<view class="nav-my">{{month}} . {{year}}</view>
			</view>
			<view class="nav-right">
				<!-- 今天 -->
				{{contentList.weather.wind_direction}} {{contentList.weather.hurricane}}
			</view>
		</view>
		<u-gap height="100" bgColor="#fff"></u-gap>
		<!-- <DayList class="day-list"></DayList> -->
		<view class="content" v-for="(c, i) in contentList.content_list" :key="c.id">
			<view class="con-top" v-if="c.category == 0">
				<view class="top-info">
					<view class="top-image">
						<image :src="c.img_url" mode="widthFix"></image>
					</view>
					<view class="img-tags">
						<text>{{c.title}} | {{c.pic_info}}</text>
					</view>
					<view class="top-title">
						<text>{{c.forward}}</text>
					</view>
					<view class="top-author" @click="DisplayIndex = !DisplayIndex">
						<text>{{c.words_info}}</text>
					</view>
					<view class="aut-info" v-show="DisplayIndex">
						<view class="aut-title">
							ABOUT
						</view>
						<view class="aut-name">
							{{c.text_author_info.text_author_name}}
						</view>
						<view class="aut-work">
							{{c.text_author_info.text_author_work}}
						</view>
						<view class="aut-desc">
							{{c.text_author_info.text_author_desc}}
						</view>
					</view>
				</view>
				<view class="top-btn">
					<view class="btn-left">
						<image src="../../static/icons/fb.png" mode=""></image>
						<text class="left-text">小记</text>
					</view>
					<view class="btn-right">
						<image src="../../static/icons/xj.png" mode=""></image>
						<image src="../../static/icons/sq.png" mode=""></image>
						<view class="btn-like">
							<image src="../../static/icons/xh.png" mode=""></image>
							<text>{{c.like_count}}</text>
						</view>
						<image src="../../static/icons/zf.png" mode=""></image>
					</view>
				</view>
			</view>
			<view class="con-intro" @click="naviTo(c.item_id, c.category)" v-if="c.title !== '摄影' && c.title !== '插画' && c.title !== '周日推荐'">
				<view class="con-title">
					{{c.title}}
				</view>
				<view class="con-author" v-if="c.category == 1">
					文 / {{c.author.user_name}}
				</view>
				<view class="con-author" v-if="c.category != 1">
					{{c.author.user_name}}
				</view>
				<view class="con-text">
					{{c.forward}}
				</view>
				<view class="con-image">
					<image :src="c.img_url" mode="heightFix"></image>
				</view>
				<view class="con-btn" v-show="c.category != 8">
					<view class="con-zf">
						<image src="../../static/icons/zf.png" mode=""></image>
					</view>
					<view class="con-like">
						<image src="../../static/icons/xh.png" mode=""></image>
						<text class="like-count">{{c.like_count}}</text>
					</view>
				</view>
				
				<view class="con-radiobtn" v-if="c.category == 8">
					<view class="btn-left">
						<view class="left-image">
							<image :src="c.author.web_url" mode=""></image>
						</view>
						<view class="left-name">
							{{c.author.user_name}}
						</view>
					</view>
					<view class="btn-right">
						<view class="con-zf">
							<image src="../../static/icons/zf.png" mode=""></image>
						</view>
						<view class="con-like">
							<image src="../../static/icons/xh.png" mode=""></image>
							<text class="like-count">{{c.like_count}}</text>
						</view>
					</view>
				</view>
			</view>
		</view>
		<!-- <view class="gap"></view> -->
		<!-- <view class="test"></view> -->
		
	</view>
</template>

<script>
	import {
		http
	} from '../../untils/http.js'
	import DayList from '../../components/DayList.vue'

	export default {
		data() {
			return {
				day: 0,
				month: 'Apr',
				year: 0,
				today: '',
				contentList: [],
				isShow: false,
				DisplayIndex: false
			}
		},
		components: {
			DayList
		},
		// onLoad({
		// 	date
		// }) {
		// 	if (date) {
		// 		this.getDailyRecommendDataFromOther(date)
		// 	}
		// },
		mounted() {
			// this.today = this.getToday()
			this.year = this.getYear().year
			this.month = this.getYear().month
			this.day = this.getYear().day
		},
		created() {
			this.getDailyRecommendData()
		},
		methods: {
			getToday() {
				let date = new Date()
				// console.log(date);
				let year = date.getFullYear()
				let month = date.getMonth() + 1
				let day = date.getDate()
				// let day = 9
				month = (month > 9) ? month : ('0' + month)
				day = (day < 10) ? ('0' + day) : day
				return year + '-' + month + '-' + day
			},
			getYear() {
				let date = new Date()
				let year = date.getFullYear()
				let month = date.getMonth() + 1
				let day = date.getDate()
				switch (month) {
					case 1:
					month = 'Jan'
					break
					case 2:
					month = 'Feb'
					break
					case 3:
					month = 'Mar'
					break
					case 4:
					month = 'Apr'
					break
					case 5:
					month = 'May'
					break
					case 6:
					month = 'Jun'
					break
					case 7:
					month = 'Jul'
					break
					case 8:
					month = 'Aug'
					break
					case 9:
					month = 'Sep'
					break
					case 10:
					month = 'Oct'
					break
					case 11:
					month = 'Nov'
					break
					case 12:
					month = 'Dec'
					break
				}
				return {
					year,
					month,
					day
				}
			},
			getDailyRecommendData() {
				let url = 'channel/one/'

				http(url + this.getToday()).then(res => {
					// console.log(res.data);
					this.contentList = res.data
					console.log(this.contentList);
				})
			},
			// getDailyRecommendDataFromOther(date) {
			// 	let url = '/channel/one/'
			// 	http(url + date).then(res => {
			// 		// console.log(res.data);
			// 		this.contentList = res.data
			// 		console.log(this.contentList);
			// 	})
			// },
			naviTo(id, category) {
				if (category == 1) {
					uni.navigateTo({
						url: '../../pages/ReadContent/ReadContent?id=' + id
					})
				} else if (category == 8) {
					uni.navigateTo({
						url: '../../pages/RadioContent/RadioContent?id=' + id
					})
				} else if (category == 3) {
					uni.navigateTo({
						url: '../../pages/QuestionContent/QuestionContent?id=' + id
					})
				}
			},
			naviToCalendar() {
				uni.navigateTo({
					url: '/pages/CalendarList/CalendarList'
				})
			}
			// scrolltolowerHandle() {
			// 	console.log('触发');
			// }
		}
	}
</script>

<style lang="scss">
	* {
		box-sizing: border-box;
	}
	
	.main {
		position: relative;
		width: 750rpx;
		background-color: #f1f1f1;
	}
	
	.top-nav {
		position: fixed;
		display: flex;
		align-items: center;
		justify-content: space-between;
		padding: 15px 15px 0;
		box-sizing: border-box;
		width: 750rpx;
		height: 50px;
		background-color: rgba(255, 255, 255, 0.9);
		z-index: 1000;
		
		.nav-day {
			display: inline-block;
			height: 100%;
			font-size: 28px;
		}
		
		.nav-my {
			display: inline-block;
			height: 100%;
			font-size: 12px;
		}
		
		// .nav-right {
		// 	padding: 4px 8px;
		// 	font-size: 10px;
		// 	border: 1px solid rgb(194, 194, 194);
		// }
		
		.nav-right {
			padding: 4px 8px;
			font-size: 12px;
			// border: 1px solid rgb(194, 194, 194);
			color: #818181;
		}
	}
	
	// .day-list {
	// 	position: absolute;
	// 	bottom: var(--dayBottom);
	// 	// bottom: 100px;
	// 	float: left;
	// 	background-color: white;
	// }
	
	.content {
		padding: 0 10px 0;
		// margin-bottom: 5px;
		width: 750rpx;
		background-color: #fff;
		
		.con-top {
			width: 100%;
			
			.top-info {
				position: relative;
				// width: 100%;
				// margin: 10px;
				margin: 0 5px 10px;
				border: 1px solid #ddd;
				border-radius: 5px;
			}
			
			.top-image {
				width: 100%;
				height: 400rpx;
				border-top-left-radius: 5px;
				border-top-right-radius: 5px;
				overflow: hidden;
				
				image {
					width: 100%;
				}
			}
			
			.img-tags {
				text-align: center;
				font-size: 10px;
				line-height: 30px;
				color: #828282;
			}
			
			.top-title {
				padding: 20px;
				font-size: 12px;
			}
			
			.top-author {
				margin-bottom: 20px;
				text-align: center;
				font-size: 10px;
				line-height: 30px;
				color: #828282;
			}
			
			.aut-info {
				padding: 10px;
				position: absolute;
				// top: 30%;
				background-color: #f0f0f0;
				z-index: 998;
				
				.aut-title {
					font-size: 12px;
					color: #c6c6c6;
				}
				
				.aut-name {
					padding: 5px 0;
					font-size: 16px;
				}
				
				.aut-work {
					padding: 0 0 5px 0;
					font-size: 12px;
					color: #666666;
				}
				
				.aut-desc {
					font-size: 12px;
					color: #666666;
				}
			}
			
			.top-btn {
				display: flex;
				align-items: center;
				// flex-direction: row-reverse;
				justify-content: space-between;
				margin-bottom: 5px;
				width: 100%;
				height: 100rpx;
				
				image {
					width: 50rpx;
					height: 50rpx;
				}
				
				.btn-left {
					padding-left: 10px;
					display: flex;
					font-size: 10px;
					line-height: 50rpx;
					color: #828282;
				}
				
				.left-text {
					margin-left: 2px;
				}
				
				.btn-right {
					padding-right: 10px;
					display: flex;
					
					image {
						margin-left: 20px;
					}
				}
				
				.btn-like {
					// padding-left: 10px;
					display: flex;
					font-size: 10px;
					line-height: 50rpx;
					color: #828282;
				}
			}
		}
		
		.con-intro {
			box-sizing: border-box;
			margin-bottom: 5px;
			width: 100%;
		}
		
		.con-title {
			margin-bottom: 3px;
			padding-top: 10px;
			font-size: 14px;
			font-weight: 700;
		}
		
		.con-author {
			margin-bottom: 10px;
			font-size: 12px;
			color: #828282;
		}
		
		.con-text {
			margin-bottom: 5px;
			font-size: 12px;
			color: #828282;
		}
		
		.con-image {
			margin-bottom: 5px;
			width: 100%;
			height: 360rpx;
			overflow: hidden;
			border-radius: 5px;
		}
		
		.con-btn {
			display: flex;
			align-items: center;
			flex-direction: row-reverse;
			height: 80rpx;
			
			.con-zf {
				// padding-bottom: 10px;
			}
			
			.con-like {
				display: flex;
				margin-right: 20px;
			}
			
			image {
				width: 50rpx;
				height: 50rpx;
			}
			
			.like-count {
				font-size: 10px;
				line-height: 50rpx;
				color: #828282;
			}
		}
		
		.con-radiobtn {
			display: flex;
			align-items: center;
			justify-content: space-between;
			// flex-direction: row-reverse;
			height: 80rpx;
			
			.btn-left {
				display: flex;
				align-items: center;
				
				image {
					border-radius: 999px;
				}
				
				.left-name {
					margin-left: 10px;
					padding-bottom: 5px;
					font-size: 12px;
					color: #c1c1c1;
				}
			}
			
			.btn-right {
				display: flex;
				align-items: center;
				flex-direction: row-reverse;
				height: 80rpx;
			}
			
			.con-zf {
				// padding-bottom: 10px;
			}
			
			.con-like {
				display: flex;
				margin-right: 20px;
			}
			
			image {
				width: 50rpx;
				height: 50rpx;
			}
			
			.like-count {
				font-size: 10px;
				line-height: 50rpx;
				color: #828282;
			}
		}
	}
	
	.gap {
		width: 100%;
		height: 100px;
	}
	
	.test {
		width: 100%;
		height: 100px;
		background-color: pink;
	}
</style>